<template>
    <div>
        <el-dialog class="car-owner-add" :title="isEdit?'修改RFID设备信息':'新增RFID设备信息'" :visible.sync="dialogVisible" width="90%" :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                <el-row>
                    <el-col :span="10">
                        <div style="width:100%;height:450px;position:relative;margin-bottom:10px">
                            <org-map @map-serach="doPosition" style="position: absolute;top: 0;right: 10px;z-index: 1;"></org-map>
                            <div id="container" style="width:100%;height:100%"></div>
                        </div>
                    </el-col>
                    <el-col :span="14" style="height:100%">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="所在小区" prop="orgId">
                                    <org-select v-model="ruleForm.orgId" @select="orgSelect" :show-all="false"></org-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="RFID设备名称" prop="rfidEquipmentName">
                                    <el-input v-model="ruleForm.rfidEquipmentName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="RFID设备编码" prop="rfidEquipmentCode">
                                    <el-input v-model="ruleForm.rfidEquipmentCode"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否启动预警" prop="isAlarm">
                                    <el-radio-group v-model="ruleForm.isAlarm">
                                        <el-radio :label="1">启动</el-radio>
                                        <el-radio :label="0">关闭</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="设备唯一ID" prop="equipmentId">
                                    <el-input v-model="ruleForm.equipmentId" placeholder="用作消息接收识别标识"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="安装位置" prop="address">
                                    <el-input v-model="ruleForm.address"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="经度" prop="longitude">
                                    <el-input v-model="ruleForm.longitude" placeholder="用作预警地图定位"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="纬度" prop="latitude">
                                    <el-input v-model="ruleForm.latitude" placeholder="用作预警地图定位"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item label="设备IP" prop="rfidIp">
                              <el-input v-model="ruleForm.rfidIp" placeholder="设备IP"></el-input>
                            </el-form-item>
                          </el-col>
                            <el-col :span="12">
                                <el-form-item label="设备照片" prop="photoId">
                                    <el-upload class="upload-demo" action="/xds/file/photo-upload" :data="fileData" :on-success="uploadSuccess" :limit="1" :file-list="fileList">
                                        <el-button type="text" size="small">上传文件</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="font-size:12px;margin-left:40px">备注:启动预警设备接收到识别信号会发出预警警报</div>
                    </el-col>
                    
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer" style="display:flex;align-items: center;justify-content: flex-end;">
                <!-- <el-button type="text" @click="getCoordinates">经纬度采集</el-button> -->
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="doReset">重 置</el-button>
                <el-button type="primary" @click="doConfirm">确 定</el-button>
            </div>
        </el-dialog>
        <coordinates ref="coordinates"></coordinates>
    </div>
</template>


<script>
import coordinates from '@/components/coordinates/index'
import * as API from '@/api/business/rfid-equipment'
import * as PhotoApi from '@/api/business/photo'
export default {
    components: { coordinates },
    data() {
        return {
            dialogVisible: false,
            isEdit: false,
            fileList: [],
            fileData: {
                filePrefix: 'rfid'
            },
            ruleForm: {
                rfid: '',
                rfidEquipmentName: '',
                rfidEquipmentCode: '',
                equipmentId: '',
                address: '',
                longitude: '',
                latitude: '',
                photoId: '',
                orgId: '',
                orgName: '',
                creator: '',
                isAlarm: 0,
                rfidIp:''
            },
            rules: {
                rfidEquipmentName: [{ required: true, message: '请输入RFID设备名称', trigger: 'blur' }],
                rfidEquipmentCode: [{ required: true, message: '请输入RFID设备编码', trigger: 'blur' }],
                equipmentId: [{ required: true, message: '请输入设备客户端ID', trigger: 'blur' }],
                address: [{ required: true, message: '请输入安装位置', trigger: 'blur' }],
                longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
                latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
                photoId: [{ required: false, message: '', trigger: 'blur' }],
                orgId: [{ required: true, message: '请选择小区', trigger: 'blur' }],
                isAlarm: [{ required: true, message: '是否预警', trigger: 'blur' }],
                rfidIp: [{ required: true, message: '设备Ip', trigger: 'blur' }]
            },
            map: null
        }
    },
    methods: {
        doPosition(value) {
            let la = value.location.split(',')
            this.map.setCenter(la) //设置地图中心点
            var marker = new AMap.Marker({
                position: la,
                // icon: './img/alarm1.png',
                map: this.map
            })

            this.ruleForm.longitude = la[0]
            this.ruleForm.latitude = la[1]
            this.ruleForm.address = value.address
            this.ruleForm.orgName = value.name
            // this.submitForm.orgProvince = value.district
            //district
        },
        initMap() {
            this.map = new AMap.Map('container', {
                resizeEnable: true,
                rotateEnable: false,
                pitchEnable: false,
                zoom: 20,
                pitch: 65,
                rotation: 0,
                viewMode: '2D', //开启3D视图,默认为关闭
                zooms: [3, 20]
            })
            this.map.on('click', e => {
                console.log(e)
            })
            this.map.on('complete', function () {
                console.log('地图加载完成')
            })
        },
        show() {
            this.isEdit = false
            this.dialogVisible = true
            this.$nextTick(() => {
                this.doReset()
                this.initMap()
            })
        },
        edit(ruleForm) {
            Object.assign(this.ruleForm, ruleForm)
            this.isEdit = true
            this.dialogVisible = true
            this.$nextTick(() => {
                this.initMap()
            })
        },
        orgSelect(obj) {
            this.ruleForm.orgName = obj.name
        },
        handleClose() {
            this.doReset()
            this.dialogVisible = false
        },
        doConfirm() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    delete this.ruleForm.createTime
                    delete this.ruleForm.modifyTime
                    if (this.isEdit) {
                        API.edit(this.ruleForm).then(res => {
                            if (res.data.code === 0) {
                                this.$message.success('设备信息修改成功!')
                                this.handleClose()
                                this.$emit('table-search')
                            }
                        })
                    } else {
                        //var filePath = this.filePath;
                        API.save(this.ruleForm).then(res => {
                            if (res.data.code === 0) {
                                //this.saveImg(filePath);
                                this.$message.success('新增设备信息成功!')
                                this.handleClose()
                                this.$emit('table-search')
                            }
                        })
                    }
                }
            })
        },

        // saveImg(filePath) {
        //     PhotoApi.save({path:filePath}).then(res => {
        //         if (res.data.code === 0) {
        //             this.ruleForm.photoId = res.data.data
        //             API.save(this.ruleForm).then(res => {
        //                 if (res.data.code === 0) {
        //                     console.log('保存图片成功!');

        //                 }
        //             })
        //         }
        //     })
        // },
        doReset() {
            this.$refs['ruleForm'].resetFields()
        },
        uploadSuccess(response) {
            this.filePath = response.data
            if (response.data.indexOf('/static') > -1) {
                this.filePath = response.data.substr(response.data.indexOf('/static'))
            }
        },
        getCoordinates() {
            this.$refs['coordinates'].show()
        }
    }
}
</script>

<style lang="scss" scoped>
.car-owner-add {
    .el-input {
        width: 220px;
    }
}
</style>
